<template>
  <el-card shadow="hover" class="section-card" v-if="submitted">
    <template #header>直方设置</template>
    <el-form-item label="直方数量" prop="bins">
      <el-input-number v-model="form.bins" :max="1000" :min="10" :step="10" />
    </el-form-item>
    <el-form-item label="直方透明度" prop="binAlpha">
      <el-input-number v-model="form.binAlpha" :max="1" :min="0.1" :step="0.1" />
    </el-form-item>
    <el-form-item label="直方边框色" prop="binColor">
      <el-color-picker v-model="form.binColor" />
    </el-form-item>
    <el-form-item label="直方填充色" prop="binFill">
      <el-color-picker v-model="form.binFill" />
    </el-form-item>
  </el-card>
</template>

<script lang="ts" setup>
import {computed} from "vue";

defineOptions({nam: "BasicBinCard"})

const props = defineProps<{
  modelValue: {
    bins: number
    binAlpha: number
    binColor: string
    binFill: number
  }
  submitted: boolean
}>()

const emit = defineEmits<{
  (
    e: 'update:modelValue',
    payload: {
      bins: number
      binAlpha: number
      binColor: string
      binFill: number
    }
  ): void
}>()


// 内部计算属性，读写都会触发 update:modelValue
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', { ...val })
  }
})



</script>

<style scoped>
.section-card {
  margin-bottom: 16px;
}
</style>
